<template>
  <div>登录页面</div>
  <div>
    <el-form ref="loginRef" :model="loginForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="loginForm.code"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'Login',
  props: {},
  setup() {
    const router = useRouter()
    const store = useStore()

    const loginRef = ref()
    const loginForm = reactive({
      username: 'admin',
      password: '123456',
      code: 'aaa',
    })

    /** 点击登录 */
    function handleLogin() {
      console.log('点击了登录', loginForm)
      store
        .dispatch('user/login', loginForm)
        .then(() => {
          console.log('登录成功')
          console.log(store)
          router.push('/')
          // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
          // this.loading = false
        })
        .catch(() => {
          // this.loading = false
        })
    }

    return {
      loginRef,
      loginForm,
      handleLogin,
    }
  },
})
</script>

<style lang="scss" scoped></style>
